import React,{useEffect,useState} from "react";
import { Text, FlatList,View,StyleSheet,TouchableHighlight,Image,TouchableOpacity, Linking,ScrollView, Alert,RefreshControl } from "react-native";
import * as S from "../Home/styles";
import { useFocusEffect, useRoute } from '@react-navigation/native';
import { Avatar, HStack, Center, NativeBaseProvider ,ChevronRightIcon,useToast,ArrowBackIcon,Modal,CloseIcon} from "native-base";
import { /*RFValue*/ } from "react-native-responsive-fontsize";
import Icon from 'react-native-vector-icons/Ionicons';
import { useGlobal } from '../../utils/GlobalContext';
import { getUeser } from "../../services/user";
import { timePlanner } from "../../services/user";
import Clipboard from '@react-native-clipboard/clipboard';
import { showToast } from "../../utils/toast";
import EmptyView from "../../components/EmptyView";



const Title = ({navigation}:any)=>{
  return(
    <View style={styles.titleBox}>
      <TouchableOpacity
        style={styles.backBtn}
        onPress={() => {
          navigation.goBack()
        }}
      >
        <ArrowBackIcon size="5" />
      </TouchableOpacity>
      <Text style={styles.titlText}>时间规划师</Text>
    </View>
  )
}

const WeChatCopyMadal = ({modalVisible,setModalVisible,wechat}:any)=>{
  const toast = useToast();
  
  return(
    <Modal
        isOpen={modalVisible}
        onClose={()=>{setModalVisible(false)}}
      >
        <View style={styles2.centeredView2}>
          <View style={styles2.modalView}>
            <View style={styles2.title}>
              <Text style={styles2.titleText}>微信号</Text>
              <TouchableOpacity onPress={()=>{setModalVisible(false,'')}}>
                <View style={styles2.closeBtn}>
                  <CloseIcon  size={5}/>
                </View>
              </TouchableOpacity>
            </View>
            <View style={styles2.viewBox}>
              <Text style={styles2.viewBoxText}>{wechat}</Text>
              <TouchableOpacity onPress={()=>{
                Clipboard.setString(wechat)
                setModalVisible(false,'')
                // toast.show({
                //   description: "复制成功",
                //   placement: "top"
                // })
                showToast("", "", "复制成功");

                
              }}>
                <View style={styles2.copyBtn}>
                  <Text style={styles2.copyBtnText}>复制</Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    
  )
}

const renderItem = ({item,navigation,setModalVisible}:any)=>{
  return (
    <TouchableOpacity onPress={()=>{
      // Alert.alert('123')
      navigation.navigate('PlannerDetail',{id:item.id})
    }}>
      <View style={styles.item}>
        <View style={styles.itemTop}>
          <View style={styles.topLeft}>
            <Text style={styles.topName}>{item.name}</Text>
            <Text style={styles.topLocal}>{item.location}</Text>
          </View>
          <View style={styles.topRight}>
            {/* <Image style={{ width:56,height:56,borderRadius:100}} source={item.avatar} alt="" /> */}
              <Avatar style={{ width:56,height:56,borderRadius:100}}  source={{
                uri: item.avatar
                }}>
                <Image style={{ width:56,height:56,borderRadius:100}} source={require("../../assets/images/profile/avatar_default.png")} alt="" />
              </Avatar>
          </View>
        </View>
        <View style={styles.itemCenter}>
          <Text numberOfLines={1} ellipsizeMode="tail" style={styles.centText}>简介：{item.description || '暂无简介'}</Text>
          <Text numberOfLines={1} ellipsizeMode="tail" style={styles.centText}>擅长：{item.beGoodAt || '暂无擅长'}</Text>
        </View>
        <View style={styles.itemBottom}>
          <View style={styles.bottomLeft}>
            <Image style={{ width:20,height:20}} source={require("../../assets/images/profile/icon_menoy.png")} alt="" />
            <View style={styles.leftTextbox}>
              <Text style={styles.leftTextboxOne}>{item.salary || 0}</Text>
              <Text style={styles.leftTextboxTwo}>/时</Text>
            </View>
          </View>
          <TouchableOpacity onPress={()=>{
            // Alert.alert('456')
            setModalVisible(true,item.wechat)

          }}>
            <View style={styles.bottomRight}>
              <Image style={{ width:20,height:15}} source={require("../../assets/images/profile/icon_wechat_2.png")} alt="" />
              <Text style={styles.bottomRightText}>微信</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    </TouchableOpacity>
  )
}

const PageList = ({navigation,setModalVisible}:any)=>{
  const [refreshing, setRefreshing] = useState(false);
  const [pageList, setPageList] = useState([]);
  useEffect(() => {
    loadData()
  }, []);

  const loadData = ()=>{
    // Alert.alert('123')
    // setRefreshing(true)
    // setTimeout(()=>{
    //   setRefreshing(false)
    // },3000)
    let obj = {
      pageNo:1,
      pageSize:9999,
    }

    timePlanner(obj).then(res=>{
      // setPageList
      // console.log(res.data.list)
      setPageList(res.data.list)
      setRefreshing(false)
    })
  }

  const onRefresh=()=>{
    setRefreshing(true)
    loadData()
  }



  return(
    <FlatList
      showsVerticalScrollIndicator={false}
      style={{height:'100%'}}
      data={pageList}
      renderItem={({item})=>{
       return renderItem({item,navigation,setModalVisible})
      }}
      keyExtractor={item => item.id}
      ListEmptyComponent={renderEmptyComponent}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          tintColor="rgba(67, 113, 177, 1)"
          // title="Loading..."
          // titleColor="rgba(198, 224, 247, 1)"
          // size={0}
          colors={["rgba(67, 113, 177, 1)"]}
          progressBackgroundColor="white"
        />
      }
    />
  )
}
const renderEmptyComponent = () => {
  return <EmptyView/>;
}


const Planner = ({navigation}:any) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [wechatName,setWechatName] = useState('');
  const setModalVisibleName = (type,name)=>{
    setModalVisible(type)
    setWechatName(name)
  }
  return (
    <NativeBaseProvider>
      <S.GrayContainer>
        {/* <Title/> */}
          <View style={styles.container}>
            <Title navigation={navigation}/>
            <PageList setModalVisible={setModalVisibleName} navigation={navigation}/>
          </View>        
      </S.GrayContainer>
      <WeChatCopyMadal setModalVisible={setModalVisibleName} wechat={wechatName} modalVisible={modalVisible}/>
    </NativeBaseProvider>
  );
};

export default Planner;
const styles = StyleSheet.create({
  container:{
    paddingHorizontal:18,
    paddingBottom:40
  },
  titleBox:{
    width:'100%',
    position:'relative',
    alignItems:'center',
    height:40,
    justifyContent:"center",
    marginBottom:16,
  },
  backBtn:{
    position:'absolute',
    left:0,
    backgroundColor:'#fff',
    width:40,
    height:40,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:100,
    
    shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.08)', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 8, // 阴影半径
    elevation: 3, // 阴影深度
  },
  titlText:{
    fontSize:16,
    fontWeight:'600',
    color:'#000000'
  },
  item:{
    marginBottom:16,
    paddingVertical:20,
    paddingHorizontal:16,
    backgroundColor:'#fff',
    borderRadius:16,
  },
  itemTop:{
    flexDirection:'row',
    justifyContent:'space-between',
    marginBottom:16,
  },
  topName:{
    fontSize:18,
    color:'#000000',
    fontWeight:'500',
    fontFamily:'HarmonyOS Sans SC',
    lineHeight:24,
    marginBottom:8,
  },
  topLocal:{
    fontFamily:'HarmonyOS Sans SC',
    fontSize:14,
    color:'#8E8E93',
  },
  topLeft:{},
  topRight:{},
  itemCenter:{},
  centText:{
    fontFamily:'HarmonyOS Sans SC',
    fontSize:14,
    color:'#2C2C2E',
    lineHeight:24,
  },
  itemBottom:{
    marginTop:16,
    flexDirection:'row',
    justifyContent:'space-between'
  },
  bottomLeft:{
    flexDirection:'row',
    alignItems:'center'
  },
  leftTextbox:{
    flexDirection:'row',
    alignItems:'flex-end',
    marginLeft:5,
  },
  leftTextboxOne:{
    fontSize:18,
    color:'#414F66',
    fontFamily:'HarmonyOS Sans SC',
    lineHeight:20,
  },
  leftTextboxTwo:{
    fontSize:14,
    color:'#8E8E93',
    fontFamily:'HarmonyOS Sans SC',
    lineHeight:20,
  },
  bottomRight:{
    flexDirection:'row',
    width:80,
    height:32,
    alignItems:'center',
    justifyContent:'center',
    borderRadius:8,
    backgroundColor:'rgba(10, 189, 56, 0.16)'

  },
  bottomRightText:{
    fontSize:14,
    color:'#0ABD38',
    fontFamily:'HarmonyOS Sans SC',
    fontWeight:'700',
    marginLeft:6,
  },
})
const styles2 = StyleSheet.create({
  centeredView2: {
    width:'100%',
    justifyContent: "center",
    alignItems: "center",
    // backgroundColor: 'rgba(0,0,0,.6)',
    padding: 20,
  },
  modalView: {
    margin: 20,
    // width:'90%',
    backgroundColor: "#fff",
    borderRadius: 20,
    overflow: "hidden",
    alignItems: "center",
    shadowColor: "#000",
    justifyContent: 'center',
    width: '100%',
    padding:16,
    // width:290)
  },
  title:{
    width: '100%',
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between'
  },
  viewBox:{
    width: '100%',
    flexDirection:'row',
    justifyContent:'space-between',
    marginTop:16,
    paddingVertical:12,
    paddingHorizontal:16,
    backgroundColor:'#F4F4F4',
    borderRadius:8,
    alignItems:'center'
  },
  titleText:{
    color:'#2C2C2E',
    fontSize:18,
    fontWeight:'700',
    fontFamily:'HarmonyOS Sans SC',
  },
  closeBtn:{
    width:40,
    height:40,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor:'#F5F5F5',
    borderRadius:100,
  },
  viewBoxText:{
    color:'#2C2C2E',
    fontSize:16,
    fontFamily:'HarmonyOS Sans SC',
  },
  copyBtn:{
    // width:36,
    // height:28,
    alignItems:'center',
    justifyContent:'center',
    backgroundColor:'#C6E0F7',
    borderRadius:4,
    paddingVertical:8,
    paddingHorizontal:10,
  },
  copyBtnText:{
    color:'#4A4A4A',
    fontSize:14,
    fontFamily:'HarmonyOS Sans SC',
    fontWeight:'700'
  },
});
